<template>
  <el-container>
    <el-row>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <div>{{data.times}}</div>
          <div
            v-for="(value, key, index) in data.add_daily"
            :key="index"
            align="left"
          >{{ key }} : "{{ value }}"</div>
        </div>
        <br />
      </el-col>
      <el-col :span="8">
        <!-- <div class="grid-content bg-purple">
          <div>{{data.times}}</div>
          <div
            v-for="(value, index) in data.list"
            :key="index"
            align="left"
          >{{ value.name }} : "{{ value.value }}"</div>
        </div>-->
        <el-card class="box-card" style="margin:10px">
          <div slot="header" class="clearfix">
            <span>{{data.times}}</span>
          </div>
          <el-scrollbar style="height:85vh">
            <el-table :data="data.list" style="width: 100%" :highlight-current-row="true">
              <el-table-column prop="name" label="地名"></el-table-column>
              <el-table-column prop="value" label="现存"></el-table-column>
              <el-table-column prop="econNum" label="累计"></el-table-column>
              <el-table-column prop="deathNum" label="死亡"></el-table-column>
              <el-table-column prop="cureNum" label="治愈"></el-table-column>
            </el-table>
          </el-scrollbar>
        </el-card>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple-light">
          <!-- {{data.add_daily}} -->
          <div id="myChartChina" :style="{width: '100%', height: '500px'}"></div>
        </div>
      </el-col>
    </el-row>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      a1: "123",
      data: "",
      echatsData: []
    };
  },
  mounted() {
    console.log("123");
    this.request.get("./fymap2020_data.d.json").then(res => {
      // console.log(res);
      this.data = res.data;
      this.data.list.forEach(value => {
        this.echatsData.push({ name: value.name, value: value.value });
      });
      console.log(this.echatsData);
      this.drawLine();
    });
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      console.log(rowIndex); // 每一行的索引
      if (rowIndex === 1) {
        return true;
      }
      return false;
    },

    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      var myChartContainer = document.getElementById("myChartChina");
      var resizeMyChartContainer = function() {
        myChartContainer.style.width = document.body.offsetWidth / 2 + "px"; //页面一半的大小
      };
      resizeMyChartContainer();
      var myChartChina = this.$echarts.init(myChartContainer);

      function randomData() {
        return Math.round(Math.random() * 500);
      }
      // 绘制图表
      var optionMap = {
        tooltip: {},
        legend: {
          orient: "vertical",
          left: "left",
          data: [""]
        },
        visualMap: {
          min: 0,
          max: 1000,
          left: "5%",
          top: "bottom",
          text: ["高", "低"],
          calculable: true,
          color: ["#b80000", "#ffffff"]
        },
        selectedMode: "single",
        series: [
          {
            name: "",
            type: "map",
            mapType: "china",
            itemStyle: {
              normal: {
                borderColor: "rgba(0, 0, 0, 0.2)"
              },
              emphasis: {
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 20,
                borderWidth: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            },
            showLegendSymbol: true,
            label: {
              normal: {
                show: true
              },
              emphasis: {
                show: true
              }
            },
            data: this.echatsData
            // data: [
            //   { name: "北京", value: randomData() },
            //   { name: "天津", value: randomData() },
            //   { name: "上海", value: randomData() },
            //   { name: "重庆", value: randomData() },
            //   { name: "河北", value: randomData() },
            //   { name: "河南", value: randomData() },
            //   { name: "云南", value: randomData() },
            //   { name: "辽宁", value: randomData() },
            //   { name: "黑龙江", value: randomData() },
            //   { name: "湖南", value: randomData() },
            //   { name: "安徽", value: randomData() },
            //   { name: "山东", value: randomData() },
            //   { name: "新疆", value: randomData() },
            //   { name: "江苏", value: randomData() },
            //   { name: "浙江", value: randomData() },
            //   { name: "江西", value: randomData() },
            //   { name: "湖北", value: randomData() },
            //   { name: "广西", value: randomData() },
            //   { name: "甘肃", value: randomData() },
            //   { name: "山西", value: randomData() },
            //   { name: "内蒙古", value: randomData() },
            //   { name: "陕西", value: randomData() },
            //   { name: "吉林", value: randomData() },
            //   { name: "福建", value: randomData() },
            //   { name: "贵州", value: randomData() },
            //   { name: "广东", value: randomData() },
            //   { name: "青海", value: randomData() },
            //   { name: "西藏", value: randomData() },
            //   { name: "四川", value: randomData() },
            //   { name: "宁夏", value: randomData() },
            //   { name: "海南", value: randomData() },
            //   { name: "台湾", value: randomData() },
            //   { name: "香港", value: randomData() },
            //   { name: "澳门", value: randomData() }
            // ]
          }
        ]
      };

      myChartChina.setOption(optionMap);
      window.onresize = function() {
        resizeMyChartContainer();
        myChartChina.resize();
      };
    }
  }
};
</script>

<style>
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.el-scrollbar__wrap {
  overflow-x: hidden;
}
</style>